import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { MyArtistWrap } from "./style";
import { getSizeImage } from "@/utils/format-utils";
import { NavLink } from "react-router-dom";

export default memo(function MyArtist() {
  const state = useSelector(
    (state) => ({
      myArtistInfo: state.getIn(["myMusicInfo", "artistSublistInfo"]),
    }),
    shallowEqual
  );

  return (
    <MyArtistWrap>
      <p className="u-title">我的歌手（{state.myArtistInfo.count}）</p>
      {state.myArtistInfo.code === 200
        ? state.myArtistInfo.data.map((item, index) => {
            return (
              <div key={item.id} className="itm f-cb clear">
                <div className="cvr fl">
                  <NavLink
                    to={{
                      pathname: "/artist",
                      search: "?id=" + item.id,
                    }}
                  >
                    <img src={getSizeImage(item.picUrl, 80)} alt="" />
                  </NavLink>
                </div>
                <div className="cnt fl">
                  <h4 className="tit">
                    <NavLink
                      to={{
                        pathname: "/artist",
                        search: "?id=" + item.id,
                      }}
                    >
                      {item.name}
                    </NavLink>
                  </h4>
                  <p>
                    {item.albumSize}个专辑&nbsp;&nbsp;&nbsp;&nbsp;{item.mvSize}
                    个MV
                  </p>
                </div>
              </div>
            );
          })
        : ""}
    </MyArtistWrap>
  );
});
